<template>
  <div id="app">
    <keep-alive>
      <!-- 需要缓存的视图组件 -->
      <router-view v-if="$route.meta.keepAlive"> </router-view>
    </keep-alive>
    <!-- 不需要缓存的视图组件 -->
    <router-view v-if="!$route.meta.keepAlive"> </router-view>
    <TheVideoCall />
  </div>
</template>
<script>
import TheVideoCall from '@/components/video_call/TheVideoCall.vue'
import tipAudio from '@/assets/audio/MessageSent.ogg'
export default {
  name: 'App',
  components: {
    TheVideoCall
  },
  data() {
    return {
      tipRing: null
    }
  },
  mounted() {
    this.connSocket()
    this.fixVh()
  },
  // TODO:尝试使用插件的方式封装 vue.use(ring)
  created() {
    const audio = new Audio(tipAudio)
    audio.preload = 'auto'
    this.tipRing = audio
  },
  methods: {
    connSocket() {
      const token = this.$store.getters.token
      if (token) {
        this.$socket.query.token = token
        this.$socket.connect()
      }
    },
    fixVh() {
      let vh = window.innerHeight * 0.01
      // Then we set the value in the --vh custom property to the root of the document
      document.documentElement.style.setProperty('--vh', `${vh}px`)

      // We listen to the resize event
      window.addEventListener('resize', () => {
        // We execute the same script as before
        vh = window.innerHeight * 0.01
        console.log(vh)
        document.documentElement.style.setProperty('--vh', `${vh}px`)
      })
    }
  },
  sockets: {
    connect: function() {
      console.log('socket connected')
    },
    customEmit: function(data) {
      console.log('this method was fired by the socket server. eg: io.emit("customEmit", data)')
    },
    error: function(e) {
      console.log('socket error', e)
    },
    connect_error: function(e) {
      console.log('connect_error', e)
    },
    reconnect() {
      console.log('socket reconnect')
    },
    message: e => {
      console.log('收到message==', e)
    },
    text(e) {
      this.tipRing.play()
    },
    audio(e) {
      this.tipRing.play()
    },
    file(e) {
      this.tipRing.play()
    },
    contactOnline(e) {
      console.log('联系人上线了', e)
    },
    contactOffline(e) {
      console.log('联系人下线了', e)
    }
  }
}
</script>
<style lang="scss"></style>
